<template>
  <div>
    <div class="banner" @click="handleBannerClick">
        <img class="banner-img" src="https://img1.qunarzz.com/vs_ceph_b2c_001/a207fac3-da68-4bad-aaee-4753153798d8.jpg_r_640x420x95_229486eb.jpg" alt="">
        <div class="banner-info">
            <div class="banner-title">产品编号3324293615</div>
            <div class="banner-number"><span class="iconfont banner-icon">&#xe634;</span>39</div>
        </div>
        <!-- <img class="banner-img" src="https://img1.qunarzz.com/vs_ceph_b2c_001/b70186cb-6b36-440d-b2f1-6307e2829ca4.jpg_r_640x420x95_673fcab1.jpg" alt="">
        <img class="banner-img" src="https://img1.qunarzz.com/vs_ceph_b2c_001/1f128937-0e9f-49d1-91c7-c1ff2fbad702.jpg_r_640x420x95_d596b3a2.jpg" alt="">
        <img class="banner-img" src="https://img1.qunarzz.com/vs_ceph_b2c_001/24fd244b-ad2d-4c1a-af75-99f84ba7dc8d.jpg_r_640x420x95_aee44d67.jpg" alt="">
        <img class="banner-img" src="https://img1.qunarzz.com/vs_ceph_vs_tts/c36de2ec-3611-4933-857a-298aa7341eab.jpg_r_640x420x95_3348aa87.jpg" alt="">
        <img class="banner-img" src="https://img1.qunarzz.com/vs_ceph_vs_tts/47ba9f50-66b8-4a9b-adc7-c3f9367182c0.jpg_r_640x420x95_75a06a0a.jpg" alt=""> -->
  </div>
  <common-gallary 
  :imgs="imgs"
   v-show="showGallary"
   @close = "handleCloseGallary"
   ></common-gallary>
  </div>
</template>

<script type="text/javascript">
import CommonGallary from 'common/gallary/Gallary'
export default {
  name: 'DetailBanner',
  data() {
    return {
      imgs:['https://img1.qunarzz.com/vs_ceph_b2c_001/a207fac3-da68-4bad-aaee-4753153798d8.jpg_r_1280x840x95_61cbcad3.jpg',
            'https://img1.qunarzz.com/vs_ceph_b2c_001/b70186cb-6b36-440d-b2f1-6307e2829ca4.jpg_r_1280x840x95_947b1932.jpg',
            'https://img1.qunarzz.com/vs_ceph_b2c_001/1f128937-0e9f-49d1-91c7-c1ff2fbad702.jpg_r_1280x840x95_62a61aa3.jpg',
            'https://img1.qunarzz.com/vs_ceph_b2c_001/24fd244b-ad2d-4c1a-af75-99f84ba7dc8d.jpg_r_640x420x95_aee44d67.jpg',
            'https://img1.qunarzz.com/vs_ceph_vs_tts/c36de2ec-3611-4933-857a-298aa7341eab.jpg_r_640x420x95_3348aa87.jpg',
            'https://img1.qunarzz.com/vs_ceph_vs_tts/47ba9f50-66b8-4a9b-adc7-c3f9367182c0.jpg_r_640x420x95_75a06a0a.jpg'
            ],
      showGallary:false
    }
  },
  methods:{
    handleBannerClick () {
      this.showGallary = true
    },
    handleCloseGallary () {
      this.showGallary = false
    }
  },
  components:{
    CommonGallary
  }
}
</script>

<style lang="stylus" scoped>
    .banner
        position relative
        overflow hidden
        height 0
        padding-bottom 67%
        .banner-img
            width 100%
        .banner-info
          color #fff
          display flex
          position absolute
          left 0
          right 0px
          bottom 0px
          line-height .6rem
          background-image linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0))
          .banner-title
            flex 1
            font-size .32rem
            padding 0 .2rem
          .banner-number
            font-size .24rem
            padding 0 .4rem
            line-height .32rem
            height .32rem
            border-radius .2rem
            background  rgba(0,0,0,.8)
            margin-top  .14rem
            .banner-icon
              font-size .24rem
</style>